<template>
  <div class="grid">
    <div class="grid-item"
         :style="{backgroundColor: lucency ? '#fff' : '#00000033',borderColor: lucency ? '#eeeeee' : 'transparent'}"
         v-for="item in tabList"
         :key="item.name">
      <a v-if="item.children.length === 0" :href="item.url" target="_blank">
        <div class="item">
          <el-image :src="item.icon"
                    fit="fill"
                    class="icon">
            <template #error>
              <div class="image-slot">
                <el-icon color="#ccc"
                         style="height:20px;width:20px;padding:6px;">
                  <icon-picture />
                </el-icon>
              </div>
            </template>
          </el-image>
          <p class="name"
             :style="{color: lucency ? '#333' : '#fff'}">{{item.name}}</p>
        </div>
      </a>
      <el-dropdown v-else>
        <a :href="item.children.length === 0 ? item.url : '#'" :target="item.children.length === 0 ? '_blank' : ''">
          <div class="item">
            <el-image :src="item.icon"
                      fit="fill"
                      class="icon">
              <template #error>
                <div class="image-slot">
                  <el-icon color="#ccc"
                           style="height:20px;width:20px;padding:6px;">
                    <icon-picture />
                  </el-icon>
                </div>
              </template>
            </el-image>
            <p class="name"
               :style="{color: lucency ? '#333' : '#fff'}">{{item.name}}</p>
          </div>
        </a>
        <template #dropdown>
          <el-dropdown-menu>
            <a v-for="item1 in item.children" :key="item1.cno" :href="item1.url" target="_blank"><el-dropdown-item>{{ item1.name }}</el-dropdown-item></a>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, onMounted, ref } from "vue";
import { Picture as IconPicture } from "@element-plus/icons-vue";
import { ElMessageBox } from "element-plus";
import { getCodeList } from '@/data/api'

export default defineComponent({
  props: {
    lucency: Boolean,
  },
  components: {
    IconPicture,
  },
  setup() {
    const tabList = ref([]);
    const key = {
      Digit1: 0,
      Digit2: 1,
      Digit3: 2,
      Digit4: 3,
      KeyQ: 4,
      KeyW: 5,
      KeyE: 6,
      KeyR: 7,
      KeyA: 8,
      KeyS: 9,
      KeyD: 10,
      KeyF: 11,
      KeyZ: 12,
      KeyX: 13,
      KeyC: 14,
      KeyV: 15,
    };
    const open = () => {
      ElMessageBox.alert("禁止打开控制台", "警告", {
        confirmButtonText: "OK",
        type: "warning",
        center: true,
      });
    };
    // 获取宫格数据
    getCodeList().then(res => {
      tabList.value = res.data
    })
    const keyDown = () => {
      document.onkeydown = function () {
        if ((window as any).event.altKey && (window as any).event.shiftKey) {
          const index = key[(window as any).event.code];
          if (index !== undefined) {
            const url = tabList[index].link;
            window.open(url);
          } else {
            return;
          }
        } else if ((window as any).event.keyCode === 123) {
          if (process.env.NODE_ENV !== "development") {
            open();
            return false;
          }
        } else if (
          (window as any).event.ctrlKey &&
          (window as any).event.shiftKey &&
          (window as any).event.keyCode == 73
        ) {
          if (process.env.NODE_ENV !== "development") {
            open();
            return false;
          }
        } else if (
          (window as any).event.ctrlKey &&
          (window as any).event.shiftKey &&
          (window as any).event.keyCode == 67
        ) {
          if (process.env.NODE_ENV !== "development") {
            open();
            return false;
          }
        }
      };
    };
    onMounted(() => {
      keyDown();
    });

    return {
      tabList,
      key,
    };
  },
});
</script>

<style lang="less" scoped>
.grid {
  width: 720px;
  margin: 20px auto 0;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  border-radius: 10px;
  overflow: hidden;
  @media only screen and (max-width: 800px) {
    width: 92%;
  }
  .grid-item {
    border: 0.5px solid;
    height: 108px;
    background-color: rgba(0, 0, 0, 0.2);
    width: calc(25% - 2px);
    text-align: center;
    color: #555;
    &:hover {
      box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16),
        0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09) !important;
    }
    .el-dropdown {
      width: 100%;
    }
    a {
      text-decoration: none;
      .item {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top: 5px;
        .icon {
          height: 32px;
          //width: 32px;
          border-radius: 2px;
          @media only screen and (max-width: 600px) {
            height: 50px;
            width: 50px;
          }
          .image-slot {
            height: 100%;
            width: 100%;
            background-color: #fff;
          }
        }
        .name {
          color: #fff;
          font-size: 13px;
          padding: 13px 0;
          @media only screen and (max-width: 600px) {
            display: none;
          }
        }
      }
    }
  }
}
a {
  text-decoration: none;
}
.el-dropdown {
  height: 100%;
}

.el-icon {
  width: 32px;
  height: 32px;
}

.tooltip-base-box {
  width: 600px;
}
.tooltip-base-box .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tooltip-base-box .center {
  justify-content: center;
}
.tooltip-base-box .box-item {
  width: 110px;
  margin-top: 10px;
}
/deep/.el-dropdown--default {
  width: 100%;
}
</style>
